<template>
  <div class="approval_page">
    <div class="input_info">
      <el-form
        :model="form2"
        ref="formRef"
        :rules="rules"
        label-width="140px"
        label-position="left"
      >
        <el-form-item label="是否通过立项">
          <el-radio-guoup
            v-if="isDengNew"
            v-model="form2.xmProjectAppendix.isAccess"
          >
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-guoup>
          <span v-if="!isDengNew">
            {{ form2.xmProjectAppendix.isAccess == 0 ? "是" : "否" }}
          </span>
        </el-form-item>

        <el-form-item label="项目合同">
          <el-upload
            v-if="isDengNew"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button
              icon="el-icon-plus"
              @click="clickBtn(2)"
              size="small"
              type="primary"
            >
              添加附件
            </el-button>
          </el-upload>
          <span>
            <p
              v-for="(i, index) in form2.xmProjectAppendix.contractAppendixUrl"
              :key="index"
            >
              {{ i.fileName }}
              <i
                @click="onRemove(2, index)"
                v-if="isDengNew"
                class="el-icon-circle-close"
              ></i>
            </p>
          </span>
        </el-form-item>

        <el-form-item label="立项文件">
          <el-upload
            v-if="isDengNew"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button
              icon="el-icon-plus"
              @click="clickBtn(3)"
              size="small"
              type="primary"
            >
              添加附件
            </el-button>
          </el-upload>
          <span>
            <p
              v-for="(i, index) in form2.xmProjectAppendix.setUpAppendixUrl"
              :key="index"
            >
              {{ i.fileName }}
              <i
                @click="onRemove(3, index)"
                v-if="isDengNew"
                class="el-icon-circle-close"
              ></i>
            </p>
          </span>
        </el-form-item>

        <el-form-item label="项目实施计划">
          <el-upload
            v-if="isDengNew"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button
              icon="el-icon-plus"
              @click="clickBtn(4)"
              size="small"
              type="primary"
            >
              添加附件
            </el-button>
          </el-upload>
          <span>
            <p
              v-for="(i, index) in form2.xmProjectAppendix
                .projectExecutionAppendixUrl"
              :key="index"
            >
              {{ i.fileName }}
              <i
                @click="onRemove(4, index)"
                v-if="isDengNew"
                class="el-icon-circle-close"
              ></i>
            </p>
          </span>
        </el-form-item>

        <el-form-item label="通知文件">
          <el-upload
            v-if="isDengNew"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button
              icon="el-icon-plus"
              @click="clickBtn(5)"
              size="small"
              type="primary"
            >
              添加附件
            </el-button>
          </el-upload>
          <span>
            <p
              v-for="(i, index) in form2.xmProjectAppendix.noticeAppendixUrl"
              :key="index"
            >
              {{ i.fileName }}
              <i
                @click="onRemove(5, index)"
                v-if="isDengNew"
                class="el-icon-circle-close"
              ></i>
            </p>
          </span>
        </el-form-item>

        <el-form-item label="其他">
          <el-upload
            v-if="isDengNew"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :headers="headers"
            :show-file-list="false"
          >
            <el-button
              icon="el-icon-plus"
              @click="clickBtn(6)"
              size="small"
              type="primary"
            >
              添加附件
            </el-button>
          </el-upload>
          <span>
            <p
              v-for="(i, index) in form2.xmProjectAppendix.otherAppendixUrl"
              :key="index"
            >
              {{ i.fileName }}
              <i
                @click="onRemove(6, index)"
                v-if="isDengNew"
                class="el-icon-circle-close"
              ></i>
            </p>
          </span>
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 16px; background: #f4f5fc"></div>
    <el-form
      style="width: 80%; margin: 0 auto"
      :model="form2"
      ref="formRef2"
      :rules="rules2"
      label-width="220px"
      label-position="top"
    >
      <el-form-item label="一、项目实施阶段" prop="xmProjectPeriodList">
        <p class="subtitle">
          如：引进、筛选、培育、示范推广的林木新优品种，创新研发、试验熟化、集成示范推广的技术及预期对比效果，建设改进的设备生产线、示范基地及规模；制定技术规程、标准，申请、授权专利或植物新品种权，发表文章，撰写调研报告或决策咨询报告等。
        </p>
        <el-table
          :stripe="true"
          :data="form2.xmProjectPeriodList"
          style="width: 100%"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.row.index + 1 }}
            </template>
          </el-table-column>
          <el-table-column
            label="阶段"
            align="center"
            width="180"
            prop="periodName"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.periodName"
                placeholder="请输入"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="开始时间" align="center" width="200">
            <template slot-scope="scope">
              <el-date-picker
                style="width: 100%"
                v-model="scope.row.periodStartTime"
                type="datetime"
                :picker-options="{ format: 'yyyy-MM-dd HH:00' }"
                class="border_red"
                placeholder="请选择开始时间"
                :disabled="!isDengNew"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="结束时间" align="center" width="200">
            <template slot-scope="scope">
              <el-date-picker
                style="width: 100%"
                v-model="scope.row.periodEndTime"
                type="datetime"
                :picker-options="{ format: 'yyyy-MM-dd HH:00' }"
                placeholder="请选择结束时间"
                :default-value="scope.row.periodStartTime"
                :disabled="!isDengNew"
              ></el-date-picker>
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center">
            <template slot-scope="scope">
              <el-select
                v-model="scope.row.headUserId"
                filterable
                placeholder="请选择"
                :disabled="!isDengNew"
              >
                <el-option
                  v-for="item in peopleList"
                  :key="item.uid"
                  :label="item.name"
                  :value="item.uid"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="二、实施人员" prop="xmProjectPersonList">
        <p class="subtitle">与项目无关的人员不得列入。</p>
        <el-table
          :stripe="true"
          :data="form2.xmProjectPersonList"
          style="width: 100%"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.row.index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" align="center" width="140">
            <template slot-scope="scope">
              <!-- <el-input v-model="scope.row.name"></el-input> -->
              <el-select
                v-model="scope.row.userId"
                filterable
                placeholder="请选择"
                :disabled="!isDengNew"
              >
                <el-option
                  v-for="item in peopleList"
                  :key="item.uid"
                  :label="item.name"
                  :value="item.uid"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center" width="80">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.personAge"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center" width="200">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.personUnit"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="职务、职称" align="center" width="140">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.personZhiji"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="在项目实施过程中拟承担的具体工作"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.personWork"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <!-- <el-table-column width="140" align="center" class-name="last_head"> -->
          <el-table-column
            width="140"
            align="center"
            fixed="right"
            v-if="isDengNew"
          >
            <template slot-scope="scope">
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-plus"
                @click="addPeopleLine(scope.row.index)"
              ></el-button>
              <el-button
                type="danger"
                size="mini"
                icon="el-icon-minus"
                @click="delPeopleLine(scope.row.index)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item
        style="position: relative"
        label="三、项目经费预算"
        prop="xmProjectFundsList"
      >
        <el-table
          :stripe="true"
          :data="form2.xmProjectFundsList"
          style="width: 100%"
          :header-cell-style="{
            background: '#DDDDDD',
            color: '#333333',
          }"
        >
          <el-table-column type="index" label="序号" width="50" align="center">
            <template slot-scope="scope">
              {{ scope.row.fundsEnumKey }}
            </template>
          </el-table-column>
          <el-table-column label="预算支出科目" align="center" width="280">
            <template slot-scope="scope">
              <el-input disabled v-model="scope.row.fundsEnumName"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="金额（万元）" align="center" width="180">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.fundsAmount"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <el-input
                v-model="scope.row.note"
                :disabled="!isDengNew"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>

      <el-form-item label="经费预算附件">
        <el-upload
          v-if="isDengNew"
          :action="uploadUrl"
          :on-success="handleSuccess"
          :headers="headers"
          :show-file-list="false"
        >
          <el-button
            icon="el-icon-plus"
            @click="clickBtn(7)"
            size="small"
            type="primary"
            >添加附件</el-button
          >
        </el-upload>

        <span>
          <p
            v-for="(i, index) in form2.xmProjectAppendix.fundsAppendixUrl"
            :key="index"
          >
            {{ i.fileName }}
            <i
              @click="onRemove(7, index)"
              v-if="isDengNew"
              class="el-icon-circle-close"
            ></i>
          </p>
        </span>
      </el-form-item>
    </el-form>

    <div class="input_info contain" v-if="isDengNew">
      <div class="contain_btn">
        <el-button type="info" size="small" @click="saveProject('', '', 0)">
          取消
        </el-button>

        <el-button
          type="warning"
          size="small"
          @click="saveProject('formRef', 'formRef2', 1)"
        >
          暂存
        </el-button>
        <!-- 自立项目没有开启时,不能提交，只能暂存 -->
        <el-button
          type="primary"
          size="small"
          @click="saveProject('formRef', 'formRef2', 2)"
        >
          确定
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { uploadUrl } from "@/const";
import { getToken } from "@/utils/auth";

import {
  apiSubmitAppendInfo, //补充-提交
  apitempAppendInfo, //补充-暂存
} from "@/api2/projectManagement/examine";

import {
  apiPeoList, // 10 获取人员列表
} from "@/api2/projectManagement/reporting";

export default {
  props: {
    // 审批的时候不能填写
    isDisadled: {
      type: Boolean,
      default: false,
    },
    isStart: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    isDengNew() {
      return this.$store.state.project.projectInfo.isDengNew;
    },
  },
  data() {
    // // 验证 项目实施经费预算
    // var CxmProjectPeriodList = (rule, value, callback) => {
    //   console.log(value);
    //   for (let i = 0; i < value.length; i++) {
    //     if (!value[i].periodStartTime) {
    //       callback(new Error("请检查开始时间"));
    //     } else {
    //       callback();
    //     }

    //     if (!value[i].periodEndTime) {
    //       callback(new Error("请检查结束时间"));
    //     } else {
    //       callback();
    //     }

    //     if (!value[i].headUserId) {
    //       callback(new Error("请检查负责人"));
    //     } else {
    //       callback();
    //     }

    //     // if (
    //     //   !value[i].headUserId ||
    //     //   !value[i].periodEndTime ||
    //     //   !value[i].periodStartTime
    //     // ) {
    //     //   callback(new Error("请检查项目实施阶段信息"));
    //     // } else {
    //     //   callback();
    //     // }
    //   }
    // };

    return {
      ProjectPeriodList: ["项目实施方案", "中期验收", "结题验收"],
      jingfei: [
        "咨询费",
        "差旅费",
        "培训/会议费",
        "劳务费",
        "专用设备购置费",
        "专用材料购置费",
        "图书文献数据费",
        "出版/文献/信息传播/知识产权事务费",
        "其他支出",
      ],
      peopleList: [],
      clickIndex: 0,
      form2: {
        xmProjectAppendix: {
          isAccess: 0, //	是否通过立项(0是，1否)
          contractAppendixUrl: [], //项目合同附件

          setUpAppendixUrl: [], //	立项文件附件
          projectExecutionAppendixUrl: [], //	项目实施计划附件
          noticeAppendixUrl: [], //	项目通知文件附件
          otherAppendixUrl: [], //	其他附件
          // 经费预算附件
          fundsAppendixUrl: [],
        },

        // 项目实施阶段
        xmProjectPeriodList: [],

        // 项目经费信息
        xmProjectFundsList: [],

        // 实施人员
        xmProjectPersonList: [
          {
            index: 0,
            sort: 0,
            userId: "", //人员id
            name: "", //姓名 personUnit
            personAge: 0, //实施人员年龄
            personUnit: "", //	实施人员单位
            personWork: "", //实施人员承担的具体工作,
            personZhiji: "", //	实施人员职级
          },
        ],
      },
      rules: {
        isAccess: [
          { required: true, message: "请选择是否通过立项", trigger: "change" },
        ],
      },
      rules2: {
        periodName: [
          { required: true, message: "请输入目的和意义", trigger: "blur" },
        ],
        // xmProjectPeriodList: [
        //   {
        //     required: true,
        //     validator: CxmProjectPeriodList,
        //     trigger: "blur",
        //   },
        // ],
        xmProjectFundsList: [
          { required: true, message: "请输入目的和意义", trigger: "blur" },
        ],
      },
      uploadUrl,
      headers: {
        Authorization: getToken(),
        platform: 'WEB'
      },

      fileList: [],

      tableData: [
        {
          index: 0,
        },
        {
          index: 1,
        },
      ],
    };
  },
  mounted() {
    this.init();
    this.getPeoList();
    console.log(this.isDengNew, "isDengNew");
    let info = this.$store.state.project.projectInfo.changeProjectInfo;
    console.log(info);
    if (!this.isDengNew || info.xmProjectAppendix.isAccess != null) {
      this.form2 = info;
      // 合同文件
      this.form2.xmProjectAppendix.contractAppendixUrl =
        JSON.parse(info.xmProjectAppendix.contractAppendixUrl) ?? [];
      // // 回显文件名
      // if (this.form2.xmProjectAppendix.contractAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.contractAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(this.form2.xmProjectAppendix.contractAppendixUrl[i]);
      //     this.form2.xmProjectAppendix.contractAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.contractAppendixUrl[i].fileName;
      //   }
      // }

      // 立项文件
      this.form2.xmProjectAppendix.setUpAppendixUrl =
        JSON.parse(info.xmProjectAppendix.setUpAppendixUrl) ?? [];
      // if (this.form2.xmProjectAppendix.setUpAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.setUpAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(this.form2.xmProjectAppendix.setUpAppendixUrl[i]);
      //     this.form2.xmProjectAppendix.setUpAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.setUpAppendixUrl[i].fileName;
      //   }
      // }

      // 项目实施计划
      this.form2.xmProjectAppendix.projectExecutionAppendixUrl =
        JSON.parse(info.xmProjectAppendix.projectExecutionAppendixUrl) ?? [];
      // if (this.form2.xmProjectAppendix.projectExecutionAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.projectExecutionAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(
      //       this.form2.xmProjectAppendix.projectExecutionAppendixUrl[i]
      //     );
      //     this.form2.xmProjectAppendix.projectExecutionAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.projectExecutionAppendixUrl[
      //         i
      //       ].fileName;
      //   }
      // }

      // 通知文件
      this.form2.xmProjectAppendix.noticeAppendixUrl =
        JSON.parse(info.xmProjectAppendix.noticeAppendixUrl) ?? [];
      // if (this.form2.xmProjectAppendix.noticeAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.noticeAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(this.form2.xmProjectAppendix.noticeAppendixUrl[i]);
      //     this.form2.xmProjectAppendix.noticeAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.noticeAppendixUrl[i].fileName;
      //   }
      // }

      // 其他
      this.form2.xmProjectAppendix.otherAppendixUrl =
        JSON.parse(info.xmProjectAppendix.otherAppendixUrl) ?? [];
      // if (this.form2.xmProjectAppendix.otherAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.otherAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(this.form2.xmProjectAppendix.otherAppendixUrl[i]);
      //     this.form2.xmProjectAppendix.otherAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.otherAppendixUrl[i].fileName;
      //   }
      // }

      // 经费预算附件
      this.form2.xmProjectAppendix.fundsAppendixUrl =
        JSON.parse(info.xmProjectAppendix.fundsAppendixUrl) ?? [];
      // if (this.form2.xmProjectAppendix.fundsAppendixUrl.length) {
      //   for (
      //     let i = 0;
      //     i < this.form2.xmProjectAppendix.fundsAppendixUrl.length;
      //     i++
      //   ) {
      //     console.log(this.form2.xmProjectAppendix.fundsAppendixUrl[i]);
      //     this.form2.xmProjectAppendix.fundsAppendixUrl[i].name =
      //       this.form2.xmProjectAppendix.fundsAppendixUrl[i].fileName;
      //   }
      // }

      // 项目实施阶段
      for (let i = 0; i < this.form2.xmProjectPeriodList.length; i++) {
        this.form2.xmProjectPeriodList[i].index = i;
      }

      // 实施人员
      for (let i = 0; i < this.form2.xmProjectPersonList.length; i++) {
        this.form2.xmProjectPersonList[i].index = i;
      }

      // 项目经费预算
      // 设置 项目经费信息
      // this.form2.xmProjectFundsList = this.jingfei.map((v, index) => {
      //   return {
      //     index,
      //     fundsEnumKey: Number(index) + 1,
      //     fundsEnumName: v, //	登记科目
      //     fundsAmount: 0, //	金额
      //     note: "", //	备注
      //   };
      // });
      for (let i = 0; i < this.form2.xmProjectFundsList.length; i++) {
        this.form2.xmProjectFundsList[i].fundsEnumName = this.jingfei[i];
      }

      console.log(this.form2.xmProjectFundsList, "this.form2");
    }
  },
  methods: {
    init() {
      // 项目实施阶段
      for (let i = 0; i < this.ProjectPeriodList.length; i++) {}
      this.form2.xmProjectPeriodList = this.ProjectPeriodList.map(
        (v, index) => {
          return {
            index,
            periodName: v, //	实施阶段名称
            periodStartTime: "", //开始时间
            periodEndTime: "", // 结束时间,
            headUserId: "", //	负责人ID
          };
        }
      );

      // 设置 项目经费信息
      this.form2.xmProjectFundsList = this.jingfei.map((v, index) => {
        return {
          index,
          fundsEnumKey: Number(index) + 1,
          fundsEnumName: v, //	登记科目
          name: v, //	登记科目
          fundsAmount: 0, //	金额
          note: "", //	备注
        };
      });
    },
    // 获取格式化时间字符串
    getFormatedTimeStr(stamp, str = "YYYY-MM-DD HH:mm") {
      return moment(stamp).format(str);
    },

    // 添加、删除实施人员
    addPeopleLine(idx) {
      console.log(idx);

      let myObject = {
        index: idx + 1,
        sort: idx + 1,
        userId: "", //人员id
        name: "", //姓名 personUnit
        personAge: 0, //实施人员年龄
        personUnit: "", //	实施人员单位
        personWork: "", //实施人员承担的具体工作,
        personZhiji: "", //	实施人员职级
        // age: 0,
        // userId: "",
        // dept: "", //职务
        // unit: "", //	单位
        // work: "", // 担任工作
        // 注意：传的数据有所不同
      };
      this.form2.xmProjectPersonList.splice(idx + 1, 0, myObject);
      for (let i = 0; i < this.form2.xmProjectPersonList.length; i++) {
        this.form2.xmProjectPersonList[i].index = i;
        this.form2.xmProjectPersonList[i].sort = i;
      }
      this.$forceUpdate();
    },
    delPeopleLine(idx) {
      this.form2.xmProjectPersonList.splice(idx, 1);
      for (let i = 0; i < this.form2.xmProjectPersonList.length; i++) {
        this.form2.xmProjectPersonList[i].index = i;
        this.form2.xmProjectPersonList[i].sort = i;
      }
      this.$forceUpdate();
    },

    getPeoList() {
      apiPeoList()
        .then((res) => {
          if (res.code == 0) {
            this.peopleList = res.data;
          } else {
            this.peopleList = [];
          }
        })
        .catch((err) => {
          console.log(err);
          this.peopleList = [];
        });
    },

    // 阶段信息 - 添加
    addPeriodList(idx) {
      let myObject = {
        index: idx + 1,
        periodName: "", //	实施阶段名称
        periodStartTime: "", //开始时间
        periodEndTime: "", // 结束时间,
        headUserId: "", //	负责人ID
      };
      this.form2.xmProjectPeriodList.splice(idx + 1, 0, myObject);
      for (let i = 0; i < this.form2.xmProjectPeriodList.length; i++) {
        this.form2.xmProjectPeriodList[i].index = i;
        this.form2.xmProjectPeriodList[i].sort = i;
      }
    },

    // 阶段信息 - 删除
    delPeriodList(idx) {
      this.form2.xmProjectPeriodList.splice(idx, 1);
      for (let i = 0; i < this.form2.xmProjectPeriodList.length; i++) {
        this.form2.xmProjectPeriodList[i].index = i;
        this.form2.xmProjectPeriodList[i].sort = i;
      }
    },

    clickBtn(e) {
      this.clickIndex = e;
    },

    // 移除
    onRemove(num, index) {
      let fileArr = [];
      if (num == 2) {
        fileArr = this.form2.xmProjectAppendix.contractAppendixUrl;
      } else if (num == 3) {
        fileArr = this.form2.xmProjectAppendix.setUpAppendixUrl;
      } else if (num == 4) {
        fileArr = this.form2.xmProjectAppendix.projectExecutionAppendixUrl;
      } else if (num == 5) {
        fileArr = this.form2.xmProjectAppendix.noticeAppendixUrl;
      } else if (num == 6) {
        fileArr = this.form2.xmProjectAppendix.otherAppendixUrl;
      } else if (num == 7) {
        fileArr = this.form2.xmProjectAppendix.fundsAppendixUrl;
      }

      fileArr.splice(index, 1);
    },

    // 文件上传成功
    handleSuccess(res) {
      let data = res.data;
      data.name = res.data.fileName;
      if (this.clickIndex == 1) {
      } else if (this.clickIndex == 2) {
        this.form2.xmProjectAppendix.contractAppendixUrl.push(data);
      } else if (this.clickIndex == 3) {
        this.form2.xmProjectAppendix.setUpAppendixUrl.push(data);
      } else if (this.clickIndex == 4) {
        this.form2.xmProjectAppendix.projectExecutionAppendixUrl.push(data);
      } else if (this.clickIndex == 5) {
        this.form2.xmProjectAppendix.noticeAppendixUrl.push(data);
      } else if (this.clickIndex == 6) {
        this.form2.xmProjectAppendix.otherAppendixUrl.push(data);
      } else if (this.clickIndex == 7) {
        this.form2.xmProjectAppendix.fundsAppendixUrl.push(data);
      }
    },

    // 取消
    reset() {
      this.form2 = {
        xmProjectAppendix: {
          setUpAppendixUrl: [], //	立项文件附件
          contractAppendixUrl: [], //项目合同附件
          projectExecutionAppendixUrl: [], //	项目实施计划附件
          noticeAppendixUrl: [], //	项目通知文件附件
          otherAppendixUrl: [], //	其他附件
          // 经费预算附件
          fundsAppendixUrl: [],
        },

        // 项目实施阶段
        xmProjectPeriodList: [],

        // 项目经费信息
        xmProjectFundsList: [],
      };
      this.init();
    },

    saveProject(formName1, formName2, i) {
      let data = {
        projectId: this.projectId,
        xmProjectPersonList: [], // 项目实施人员

        xmProjectAppendix: {
          setUpAppendixUrl: [], //	立项文件附件
          contractAppendixUrl: [], //项目合同附件
          projectExecutionAppendixUrl: [], //	项目实施计划附件
          noticeAppendixUrl: [], //	项目通知文件附件
          otherAppendixUrl: [], //	其他附件
          // 经费预算附件
          fundsAppendixUrl: [],
        },

        // 项目实施阶段
        xmProjectPeriodList: [],

        // 项目经费信息
        xmProjectFundsList: [],
      };

      data.xmProjectAppendix.isAccess = this.form2.xmProjectAppendix.isAccess;
      // 立项文件附件
      data.xmProjectAppendix.setUpAppendixUrl =
        this.form2.xmProjectAppendix.setUpAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.setUpAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.setUpAppendixUrl
      );
      // 项目合同附件
      data.xmProjectAppendix.contractAppendixUrl =
        this.form2.xmProjectAppendix.contractAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.contractAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.contractAppendixUrl
      );
      // 项目实施计划附件
      data.xmProjectAppendix.projectExecutionAppendixUrl =
        this.form2.xmProjectAppendix.projectExecutionAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.projectExecutionAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.projectExecutionAppendixUrl
      );
      // 项目通知文件附件
      data.xmProjectAppendix.noticeAppendixUrl =
        this.form2.xmProjectAppendix.noticeAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.noticeAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.noticeAppendixUrl
      );
      // 其他附件
      data.xmProjectAppendix.otherAppendixUrl =
        this.form2.xmProjectAppendix.otherAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.otherAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.otherAppendixUrl
      );
      // 经费预算附件
      data.xmProjectAppendix.fundsAppendixUrl =
        this.form2.xmProjectAppendix.fundsAppendixUrl.map((v) => {
          return {
            fileName: v.fileName,
            relativeFilePath: v.relativeFilePath,
            size: v.size,
            suffix: v.suffix,
            url: v.url,
          };
        });
      data.xmProjectAppendix.fundsAppendixUrl = JSON.stringify(
        data.xmProjectAppendix.fundsAppendixUrl
      );

      // 项目实施阶段
      data.xmProjectPeriodList = this.form2.xmProjectPeriodList.map((v) => {
        return {
          periodName: v.periodName, //	实施阶段名称
          periodStartTime: v.periodStartTime, //开始时间
          periodEndTime: v.periodEndTime, // 结束时间,
          headUserId: v.headUserId, //	负责人ID
        };
      });
      for (let i = 0; i < data.xmProjectPeriodList.length; i++) {
        // 开始时间
        data.xmProjectPeriodList[i].periodStartTime = this.getFormatedTimeStr(
          data.xmProjectPeriodList[i].periodStartTime
        );
        // 结束时间
        data.xmProjectPeriodList[i].periodEndTime = this.getFormatedTimeStr(
          data.xmProjectPeriodList[i].periodEndTime
        );
      }
      // 项目经费信息
      data.xmProjectFundsList = this.form2.xmProjectFundsList;

      // 实施人员
      data.xmProjectPersonList = this.form2.xmProjectPersonList;

      // data.isAccess = this.form2.xmProjectAppendix.isAccess;

      if (formName1 != 0 && formName2 != 0) {
        let form1 = false;
        let form2 = false;
        this.$refs[formName1].validate((valid1) => {
          form1 = valid1;
        });
        this.$refs[formName2].validate((valid2) => {
          form2 = valid2;
        });
        console.log(form1, form2, i);
        if (form1 && form2) {
          if (i == 1) {
            apitempAppendInfo(data)
              .then((res) => {
                if (res.code == 0) {
                  this.msgSuccess("暂存成功");
                  this.reset();
                } else {
                  this.msgError("暂存失败");
                }
              })
              .catch((err) => {
                console.log(err);
                this.msgError("暂存失败");
              });
          } else {
            apiSubmitAppendInfo(data)
              .then((res) => {
                if (res.code == 0) {
                  this.msgSuccess("提交成功");
                  this.reset();
                } else {
                  this.msgError("提交失败");
                }
              })
              .catch((err) => {
                console.log(err);
                this.msgError("提交失败");
              });
          }
        }
      } else {
        this.reset();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
::v-deep .el-table__cell {
  border: none !important;
}

::v-deep .el-input.is-disabled .el-input__inner {
  color: #606266 !important;
}

::v-deep .el-textarea.is-disabled .el-textarea__inner {
  color: #606266 !important;
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

::v-deep .border_red {
  position: relative;
}
.red_span {
  color: #ff0000;
  position: absolute;
  z-index: 100;
  bottom: -0.5rem;
  left: 1rem;
  font-size: 0.5rem;
}

.request_class::before {
  content: "*";
  color: #f56c6c;
  position: relative;
  top: 1.875rem;
  left: -0.625rem;
}

.approval_page {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  .input_info {
    padding: 1rem 0;
    width: 80% !important;
    margin: 0 auto;
  }
  .contain {
    .contain_info {
      .title {
        font-size: 1rem;
        color: #364a71;
        font-weight: bold;
        line-height: 1.1875rem;
      }
      .subtitle {
        // text-indent: 2em;
        background: red;
        font-size: 0.875rem;
        color: #333333;
        line-height: 1rem;
      }
      ::v-deep .last_head {
        background: transparent !important;
        border: transparent !important;
      }
    }
    .contain_btn {
      margin-top: 2.5rem;
      height: 2rem;
      width: 100%;
      text-align: center;
    }
  }
}
</style>
